import React,{memo} from 'react'
import RotationChart from '../rotationChart/RotationChart'
import { RecommandBox } from './Recommand.style'
import { imgBaseUrl } from '@/assets/data/baseUrl'
import { useHistory } from 'react-router-dom'

function Recommand(props) {
    // console.log(props)
    // console.log(props.classifyRecommand)
    const {rotationImg=[],recommandList=[]}=props.classifyRecommand
    const history=useHistory()
    const gotoListPage=(type)=>{
        history.push(`/classifyList/${type}`)
    }
    return (
        <RecommandBox>
            <RotationChart rotationImg={rotationImg} />
            <div className="list">
                {
                    recommandList.map((item,index)=>{
                        return <div key={index} className='item' onClick={()=>gotoListPage(item.title)}>
                            <img src={imgBaseUrl+item.imgSrc} />
                            <div>{item.title}</div>
                        </div>
                    })
                }
            </div>
            
        </RecommandBox>
    )
}

export default memo(Recommand)
